import { createRouter, createWebHashHistory } from 'vue-router'

// 定义路由
const routes = [
  {
    path: '/',
    component: () => import('@/views/Layout/LayoutPage.vue'),
    name: 'layout',
    children: [
      {
        path: '',
        component: () => import('@/views/Layout/Home/HomeIndex.vue'),
        name: 'home',
      },
      {
        path: 'category/:id',
        component: () => import('@/views/Layout/Category/HomeCategory.vue'),
        name: 'category',
      },
      {
        path: 'category/sub/:id',
        component: () => import('@/views/Layout/Category/SubCategory.vue'),
        name: 'subCategory',
      },
      {
        path: 'detail/:id',
        component: () => import('@/views/Layout/GoodsDetail/GoodsDetail.vue'),
        name: 'goodsDetail',
      },
      {
        path: 'cartlist',
        component: () => import('@/views/Layout/CartList/CartList.vue'),
        name: 'cartlist',
      },
      {
        path: 'settle',
        component: () =>
          import('@/views/Layout/SettleAccounts/SettleAccounts.vue'),
        name: 'settle',
      },
      {
        path: 'pay',
        component: () => import('@/views/Layout/Pay/PayPage.vue'),
        name: 'pay',
      },
      {
        path: 'member',
        component: () => import('@/views/Layout/Member/MemberPage.vue'),
        name: 'member',
        redirect: 'member/user',
        children: [
          {
            path: 'user',
            component: () => import('@/views/Layout/Member/MemberUser.vue'),
          },
          {
            path: 'order',
            component: () => import('@/views/Layout/Member/MemberOrder.vue'),
          },
        ],
      },
    ],
  },
  {
    path: '/login',
    component: () => import('@/views/Login/LoginPage.vue'),
    name: 'login',
  },
  {
    path: '/:pathMatch(.*)*',
    component: () => import('@/views/404/NotFound.vue'),
    name: '404',
  },
]

// 配置路由实例
const router = createRouter({
  // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写 // 当路由跳转时，页面滚动回顶部
  scrollBehavior() {
    return {
      top: 0,
    }
  },
})

export default router
